<template>
   <div>
       <!-- 图片顶部滑动导航条制作(用mui现成的) -->
       <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a v-for="item in getimgcategory" :key="item.id" :class='["mui-control-item",item.id === 0?"mui-active":""]' 
						@click.prevent="getImglist(item.id)">
							{{ item.title }} {{item.id}}
						</a>
					</div>
				</div>

		</div>
		<!-- 图片懒加载 -->
		<ul class="images-info-list">
			<router-link v-for="item in getimages" :key="item.id" :to="'/home/photosinfo/'+item.id" tag="li"> 
				<!-- <img v-lazy="item.img_url"> -->
				<img v-lazy="item.img_url">
				<div class="info">
					<h3 class="info-title">{{ item.title}}</h3>
					<div class="info-body" v-html="item.zhaiyao"></div>
				</div>
			</router-link>
		</ul>
   </div>
</template>
<script>
import mui from "../../lib/mui/js/mui.min.js"
import { Toast } from "mint-ui"


    

export default {
    data(){
        return {
			getimgcategory: [],
			getimages: []
        }
    },
    created(){
		
		this.getimgcategoryList();
		this.getImglist(0)
    },
    methods:{
		getimgcategoryList(){
			this.$http.get("api/getimgcategory").then( result =>{
				// console.log(result.body)
				if( result.body.status === 0 ){
					// console.log(result.body.message)
					this.getimgcategory = result.body.message
					this.getimgcategory.unshift({id:0,title:"全部"})
				}else {
					Toast("加载失败")
				}
			})
		
		},
		getImglist(cateId){
			console.log("ok")
			this.$http.get("api/getimages/"+cateId).then ( result =>{
				if( result.body.status === 0 ){
					// console.log(result.body.message)
					this.getimages = result.body.message
				}else {
					Toast("加载失败")
				}
			})
		}
	},
	mounted(){
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
		mui(".mui-scroll").on('tap', 'a', function (event) {
        	this.click();
		});


	}

}
</script>
<style lang="scss" scoped>
	.mint-header.is-fixed {
		z-index: 8889;
	}
	.images-info-list {
		list-style: none;
		padding: 10px;
		margin: 0px;
		
		li {
			background: #eee;
			margin-bottom: 10px;
			text-align: center;
			position: relative;
			img {
				width: 100%;
				vertical-align: middle;
			}
			image[lazy=loading] {
				width: 40px;
				height: 300px;
				margin: auto;
			}
			.info {
				text-align: left;
				padding: 0px 5px;
				position: absolute;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				max-height: 115px;
				.info-title {
					font-size: 14px;
					color: #999;
					
				}
				.info-body {
					font-size: 12px;
					line-height: 22px;
				}
			}
		}
	}
</style>


